<template>
    <page-wrapper>
        <table-search @search="search(1)" :isExtra="false" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-select v-model="form.status" style="width:120px;" placeholder="请选择状态">
                        <a-select-option :value="item.value" v-for="item in nodeStatus" :key="item.value">{{item.name}}</a-select-option>
                    </a-select>
                </form-item>
                <!-- <form-item label="">
                    <a-input v-model.trim="form.keyword" placeholder="关键词搜索" />
                </form-item> -->
            </template>
            <template slot="extra">
                <a-button class="filter-item" type="primary" :disabled="hasPerm(['sys:work:add'])" icon="plus" @click="addInfo()">新增工单</a-button>
                <a-button
                    class="filter-item btn_space"
                    type="danger"
                    @click="remove()"
                    :disabled="!selectionBox.length || hasPerm(['sys:work:remove'])"
                    icon="delete"
                    >删除</a-button
                >
            </template>
        </table-search>
        <div class="table_scroll">
            <table-list
                :loading="loading"
                :columns="columns"
                rowKey="id"
                :pagination="pagination"
                :data="list"
                :scroll="{x:1400}"
            >
                <template slot="orderType" slot-scope="{ text }">
                    <field-tag
                        :value="text"
                        type="value"
                        showType="name"
                        :data="workOrderTypes"
                    ></field-tag>
                </template>
                <!-- <template slot="status" slot-scope="{ text }">
                    <field-tag
                        :value="text"
                        type="value"
                        showType="name"
                        :data="nodeStatus"
                    ></field-tag>
                </template> -->
                <template slot="action" slot-scope="{ text }">
                    <a-button
                        size="small"
                        type="primary"
                        class="btn_space"
                        @click="addInfo(text)"
                        >{{text.status=='待处理'?'处理':'查看'}}</a-button
                    >
                </template>
            </table-list>
        </div>

        <template v-if="isShowInfo">
            <work-info :info="itemInfo" @cancel="isShowInfo=false" @submit="submit"/>
        </template>
        
    </page-wrapper>
</template>
<script>
import table from '@/mixins/table';
import { columns,time,actions } from './columns';
import {nodeStatus,workOrderTypes} from './dictionary'
import {remoteList} from '@/api/workorder/flow'
import WorkInfo from './components/info.vue'
import { mapState } from 'vuex';

export default {
    name: 'OperationList',
    mixins: [table],
    components: {
        WorkInfo
    },
    data() {
        let originForm = {
            status: '0',
        };
        return {
            originForm,
            nodeStatus,
            workOrderTypes,
            form: {
                ...originForm
            },
            originColumns:columns,
            columns:[],
            time,
            actions,
            itemInfo: null,
            isShowInfo: false,
        };
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.accountInfo
        })
    },
    watch:{
        'form.status':function(e){
            if(e==1){
                this.columns = [...this.originColumns,...this.time,...this.actions]
            }else{
                this.columns = [...this.originColumns,...this.actions]
            }
        }
    },
    created(){
        this.form.leaderId = this.userInfo.userId;
        this.columns = [...this.originColumns,...this.actions]
        this.search(1);
    },
    methods: {
        async search(page) {
            try {
                this.loading = true;
                if(page){
                    this.form.page = page
                }
                this.list = []
                let res = await remoteList(this.form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
                this.selectionBox = []
            } finally {
                this.loading = false;
            }
        },
        //显示添加
        addInfo(item = {}) {
            this.isShowInfo = true;
            this.itemInfo = item;
        },
        submit() {
            this.isShowInfo = false;
            this.itemInfo = {}
            this.search(1);
        }
    }
};
</script>
